<template>
  <ul class="tree-ul">
    <li class="tree-li">
      <span class="tree-expand" @click="handleExpand">
        <span v-if="data.children && data.children.length && !data.expand">+</span>
        <span v-if="data.children && data.children.length && data.expand">-</span>
      </span>
      <i-checkbox v-if="showCheckbox" :value="data.checked" @input="handleCheck"></i-checkbox>
      <span>{{data.title}}</span>
      <tree-node
        v-if="data.expand"
        v-for="(item,index) in data.children"
        :key="index"
        :data="item"
        :show-checkbox="showCheckbox"
      ></tree-node>
    </li>
  </ul>
</template>

<script>
import { findComponentUpward } from "@/utils/assist.js";
import iCheckbox from "base/checkbox/checkbox";
export default {
  name: "TreeNode",
  components: {
    iCheckbox
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    showCheckbox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tree: findComponentUpward(this, "Tree")
    };
  },
  methods: {
    handleExpand() {
      this.$set(this.data, "expand", !this.data.expand);

      if (this.tree) {
        this.tree.emitEvent("on-toggle-expand", this.data);
      }
    },
    //子节点全部选择
    updateTreeDown(data,checked) {
        this.$set(data,'checked',checked);

        if(data.children && data.children.length) {

        }
    }
  }
};
</script>

<style>
.tree-ul,
.tree-li {
  list-style: none;
  padding-left: 10px;
}
.tree-expand {
  cursor: pointer;
}
</style>
